<template>
  <div>
    <Form class="form-wrapper" :model="formState" layout="inline" autocomplete="off">
      <FormItem :labelCol="{ span: 12 }" label="事件类型">
        <Select v-model:value="formState.eventType" :options="eventTypeList" placeholder="请选择"></Select>
      </FormItem>
      <FormItem :labelCol="{ span: 12 }" label="事件名称">
        <Input v-model:value="formState.eventName" placeholder="请输入" />
      </FormItem>
      <FormItem :labelCol="{ span: 12 }" label="起止时间">
        <RangePicker
          label="起止时间"
          v-model:value="formState.eventTime"
          :disabledDate="disabledDate"
          showTime
          @calendarChange="onCalendarChange"
        />
      </FormItem>
      <FormItem>
        <Tooltip title="查询">
          <Button type="primary" @click="search" shape="circle"
            ><template #icon><SearchOutlined /></template
          ></Button>
        </Tooltip>
        <Tooltip title="重置">
          <Button style="margin-left: 10px" @click="reset" shape="circle"
            ><template #icon><RedoOutlined /></template
          ></Button>
        </Tooltip>
      </FormItem>
    </Form>
  </div>
</template>
<script lang="ts" setup>
import { Button, Input, DatePicker, Form, FormItem, Select, Tooltip } from 'ant-design-vue';
import { ref } from 'vue';
import { SearchOutlined, RedoOutlined } from '@ant-design/icons-vue';
import { Dayjs } from 'dayjs';
const formState = ref({
  eventType: undefined,
  eventName: undefined,
  eventTime: undefined,
});

const eventTypeList = ref([
  {
    label: '系统事件',
    value: 'EVENT.SYS',
  },
  {
    label: '自定义事件',
    value: 'EVENT.CUSTOM',
  },
]);
const { RangePicker } = DatePicker;
type RangeValue = [Dayjs, Dayjs];
const dates = ref<RangeValue>();
const disabledDate = (current: Dayjs) => {
  if (!dates.value || (dates.value as any).length === 0) {
    return false;
  }
  const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 30;
  const tooEarly = dates.value[1] && dates.value[1].diff(current, 'days') > 30;
  return tooEarly || tooLate;
};
const onCalendarChange = (val: RangeValue) => {
  dates.value = val;
};
const emit = defineEmits(['get']);
//重置
const reset = () => {
  formState.value = {
    eventType: undefined,
    eventName: undefined,
    eventTime: undefined,
  };
  emit('get', formState.value);
};
//查询
const search = () => {
  emit('get', formState.value);
};
</script>
